<!--
 * @Author: your name
 * @Date: 2021-04-23 16:37:34
 * @LastEditTime: 2021-09-15 15:55:17
 * @LastEditors: Please set LastEditors
 * @Description: 推呼自定义圆形导航栏
 * @FilePath: \saas\components\tNav.vue
-->
<template>
    <view class="sc-nav">
        <view
            :class="['nav-list', currentIndex === index ? 'add' : '']"
            v-for="(item, index) in navList"
            :key="index"
            :style="{ width: width, height: height }"
            @click.stop="selectNav(item, index)"
        >
            {{ item[lable] }}
            <view class="icon" v-if="item.count">{{ item.count }}</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        permissions: {
            type: Array,
            default: () => [],
        },
        //导航菜单数据
        navList: {
            type: Array,
            default: () => [],
        },
        index: {
            //默认选中的索引
            type: Number,
            default: 0,
        },
        width: {
            type: String,
            default: "90%",
        },
        height: {
            type: String,
            default: "70rpx",
        },
        // 键名
        lable: {
            type: String,
            default: "name",
        },
        // 键值
        value: {
            type: String,
            default: "value",
        },
        //外部传入得当前索引
        currentShowIndex: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            currentIndex:  0, //当前选中的索引
        };
    },
    computed:{
        //监听传入得index
       propIndex(){
           this.currentIndex = this.currentShowIndex
           return this.currentShowIndex
       }
    },
    methods: {
        selectNav(item, index) {
            this.currentIndex = index;
            this.$emit("click", item, index);
        },
    },
};
</script>
<style lang="less" scoped>
.sc-nav {
    display: flex;
    background-color: #f9f9f9;
    border-radius: 36rpx;

    color: #707070;
    font-size: 26rpx;
    letter-spacing: 1px;
    .nav-list {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 36rpx;
        position: relative;
        &.add {
            background-color: #ededed;
            color: var(--color);
        }
        .icon {
            position: absolute;
            top: 0rpx;
            right: 0rpx;
            background-color: #ff573d;
            color: #ffffff;
            font-size: 18rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
        }
    }
}
</style>
